<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小傅哥 - 拼团项目 - 商品详情页</title>
    <link rel="stylesheet" href="css/index.css">

</head>
<body>
<!-- 轮播图 -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="./images/sku-13811216-01.png"></div>
        <div class="swiper-slide"><img src="./images/sku-13811216-02.png"></div>
        <div class="swiper-slide"><img src="./images/sku-13811216-03.png"></div>
    </div>
    <div class="swiper-pagination"></div>
</div>

<!-- 商品信息 -->
<div class="product-info">
    <h1 class="product-title">手写MyBatis：渐进式源码实践（全彩）</h1>
    <span class="promotion-tag">大促优惠</span>
    <span class="promotion-text"></span> <!-- 动态填充促销文本 -->
</div>

<!-- 拼单列表容器 -->
<div class="group-list">
    <!-- 动态生成拼团列表 -->
</div>

<!-- 空白区域 -->
<div class="area"></div>

<!-- 底部操作栏 -->
<div class="action-bar">
    <button class="action-btn buy-alone"></button>
    <button class="action-btn group-buy"></button>
</div>

<!-- 支付弹窗 -->
<div id="paymentModal" class="modal">
    <div class="modal-content">
        <h2>请扫码支付</h2>
        <br/>
        <p id="paymentAmount" style="color:red;"></p>
        <img src="./images/sku-13811216-04.png" alt="支付二维码" class="qr-code">
        <p id="outTradeNo"></p>
        <div class="button-group">
            <button id="cancelPayment">取消支付</button>
            <button id="completePayment">支付完成</button>
        </div>
    </div>
</div>
<script src="js/index.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 根据测试诉求，设置基础地址
    var baseUrl = "http://127.0.0.1:8091";

    // 获取信息
    var userId = getCookie("username");
    if (!userId) {
        window.location.href = "login.html"; // 跳转到登录页
        return;
    }

    // 定义交易单号，如果交易单号不为空，则当前用户已参与拼团交易
    let outTradeNo = "";

    // 请求接口数据
    fetch(baseUrl + '/api/v1/gbm/index/query_group_buy_market_config', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            userId: userId,
            source: "s01",
            channel: "c01",
            goodsId: "9890001"
        })
    })
    .then(response => response.json())
    .then(res => {
        if(res.code !== '0000') return;

        const { goods, teamList, teamStatistic } = res.data;
        const groupList = document.querySelector('.group-list');
        const promotionText = document.querySelector('.promotion-text');

        // 更新促销信息
        promotionText.textContent = `直降 ¥${goods.deductionPrice.toFixed(0)}，${teamStatistic.allTeamUserCount}人再抢，参与马上抢到`;

        // 清空并生成拼团列表
        groupList.innerHTML = '';

        if (teamList.length === 0) {
            groupList.innerHTML = `
                <div class="group-item empty-tips">
                    <div class="tips-content">
                        小伙伴，赶紧去开团吧，做村里最靓的仔！🎉
                    </div>
                </div>
            `;
        } else {
            teamList.forEach(team => {
                const remaining = team.targetCount - team.lockCount;
                // 判断当前用户ID是否为登录用户ID
                if(userId == team.userId){
                    outTradeNo = team.outTradeNo;
                }

                groupList.innerHTML += `
                    <div class="group-item">
                        <div>
                            <div class="user-info" data-teamId="${team.teamId}">${team.userId}</div>
                            <div class="group-status">
                                <span>组队仅剩${remaining}人，拼单即将结束</span>
                                <span class="countdown">${team.validTimeCountdown}</span>
                            </div>
                        </div>
                        <div class="right">
                            <button class="group-btn" data-price="${goods.payPrice.toFixed(0)}">参与拼团</button>
                        </div>
                    </div>
                `;
            });
        }

        // 更新底部按钮
        const buyAloneBtn = document.querySelector('.buy-alone');
        const groupBuyBtn = document.querySelector('.group-buy');
        buyAloneBtn.textContent = `单独购买(￥${goods.originalPrice.toFixed(0)})`;
        buyAloneBtn.dataset.price = goods.originalPrice;
        groupBuyBtn.textContent = `开团购买(￥${goods.payPrice.toFixed(0)})`;
        groupBuyBtn.dataset.price = goods.payPrice;

        // 绑定支付事件[拼团购买]
        document.querySelectorAll('.group-btn, .group-buy').forEach(btn => {
            btn.addEventListener('click', function() {

                // 如果有值，则直接展示支付按钮
                if(outTradeNo) {
                    // 显示支付弹窗
                    document.getElementById('paymentAmount').textContent =
                        `￥${this.dataset.price}`;
                    document.getElementById('outTradeNo').textContent =
                        outTradeNo;
                    document.getElementById('paymentModal').style.display = 'block';
                    return;
                }

                // 获取拼团ID
                let teamId = null;
                if (this.classList.contains('group-btn')) {
                    const groupItem = this.closest('.group-item');
                    const userInfo = groupItem.querySelector('.user-info');
                    teamId = userInfo.dataset.teamid;
                }

                outTradeNo = generateRandomNumber(12);

                // 构造请求数据（假设activityId和goodsId从按钮dataset获取）
                const postData = {
                    userId: userId,
                    teamId: teamId,
                    activityId: 100123,
                    goodsId: "9890001",
                    source: "s01",
                    channel: "c01",
                    outTradeNo: outTradeNo,
                    notifyUrl: baseUrl + "/api/v1/test/group_buy_notify"
                };

                // 调用支付接口
                fetch(baseUrl + '/api/v1/gbm/trade/lock_market_pay_order', {
                    method: 'POST',
                    headers: {
                        'content-type': 'application/json'
                    },
                    body: JSON.stringify(postData)
                })
                .then(response => response.json())
                .then(res => {
                    if (res.code !== '0000') {
                        // 失败，清空交易ID
                        outTradeNo = null;
                        alert(res.code + "：" +res.info);
                        return;
                    }

                    // 显示支付弹窗
                    document.getElementById('paymentAmount').textContent =
                        `￥${this.dataset.price}`;
                    document.getElementById('outTradeNo').textContent =
                        outTradeNo;
                    document.getElementById('paymentModal').style.display = 'block';
                })
                .catch(error => {
                    console.error('支付请求失败:', error);
                });
            });
        });

        // 启动倒计时
        document.querySelectorAll('.countdown').forEach(el => {
            new Countdown(el, el.textContent);
        });

    });

  // 支付模块
  const modal = document.getElementById("paymentModal")
  const paymentAmount = document.getElementById("paymentAmount")
  const cancelPayment = document.getElementById("cancelPayment")
  const completePayment = document.getElementById("completePayment")

  // 获取所有的按钮
  const buttons = document.querySelectorAll(".buy-alone")

  // 为每个按钮添加点击事件
  buttons.forEach((button) => {
    button.addEventListener("click", function () {
      var userId = getCookie("username");
      if (!userId) {
          window.location.href = "login.html"; // 跳转到登录页
          return;
      }

      const price = this.getAttribute("data-price")
      showPaymentModal(price)
    })
  })

  // 显示支付弹窗
  function showPaymentModal(price) {
    paymentAmount.textContent = `支付金额：￥${price}`
    modal.style.display = "block"
  }

  // 隐藏支付弹窗
  function hidePaymentModal() {
    modal.style.display = "none"
  }

  // 取消支付
  cancelPayment.addEventListener("click", hidePaymentModal)

  // 支付完成
  completePayment.addEventListener("click", () => {
    // 生成符合要求的交易时间格式
    const formatTime = date => date.toISOString()
        .replace(/T/, ' ')
        .replace(/\..+/, '')
        .substr(0, 19);

    // 构造请求参数
    const postData = {
        source: "s01",       // 保持与锁定订单时一致
        channel: "c01",      // 保持与锁定订单时一致
        userId: userId,
        outTradeNo: outTradeNo,
        outTradeTime: new Date()
    };

    // 调用结算接口
    fetch(baseUrl + '/api/v1/gbm/trade/settlement_market_pay_order', {
        method: 'POST',
        headers: {
            'content-type': 'application/json'
        },
        body: JSON.stringify(postData)
    })
    .then(response => response.json())
    .then(res => {
        outTradeNo = null;
        if (res.code === '0000') {
            alert('支付&结算成功！');
            window.location.reload(); // 支付成功后刷新页面
        } else {
            alert(`支付&结算失败：${res.info || '未知错误'}`);
        }
    })
    .catch(error => {
        console.error('接口请求失败:', error);
        alert('网络异常，请检查连接');
    })
    .finally(() => {
        hidePaymentModal(); // 始终关闭弹窗
    });

  })

  // 点击弹窗外部关闭弹窗
  window.addEventListener("click", (event) => {
    if (event.target == modal) {
      hidePaymentModal()
    }
  })

});
</script>

</body>
</html>